<template>
  <div class="relation-select">
    <van-field
      clickable
      readonly
      :is-link="!readonly"
      :label="label"
      :value="selectValue"
      :placeholder="placeholder"
      :required="required"
      :disabled="disabled"
      :rules="rules"
      @click="showSelectDlg = !readonly"
    />
    <van-popup
      v-if="showSelectDlg"
      v-model="showSelectDlg"
      position="bottom"
      get-container="body"
      :overlay="false"
      style="height: 100vh; width: 100vw; background: #F6F6F6;"
    >
      <online-form :formId="props.relativeFormId" @close="onCloseSelectForm" />
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'relationSelect',
  props: {
    label: {
      type: String,
      default: '关联选择'
    },
    value: {
      type: [String, Number, Array]
    },
    required: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    },
    rules: {
      type: Array
    },
    placeholder: {
      type: String
    },
    multiple: {
      type: Boolean,
      default: false
    },
    props: {
      type: Object,
      default: () => {
        return {
          label: 'name',
          value: 'id',
          relativeFormId: undefined,
          datasourceId: undefined,
          relationId: undefined,
          variableName: undefined,
          relationTableName: undefined,
          relationColumnName: undefined
        }
      }
    }
  },
  data () {
    return {
      showSelectDlg: false,
      selectedItems: []
    }
  },
  methods: {
    onChange (selectItem) {
      let val;
      if (Array.isArray(selectItem) && selectItem.length > 0) {
        val = selectItem.map(item => item[this.props.relationColumnName]);
      }
      if (!this.multiple) val = val[0];
      this.$emit('input', val);
      this.$emit('change', val)
    },
    onCloseSelectForm (refresh, selectItem) {
      this.showSelectDlg = false;
      if (refresh) {
        this.onChange(selectItem);
        this.selectedItems = selectItem;
      }
    },
    getSelectItemList () {
      if (this.value == null || this.value === '') {
        this.selectedItems = [];
        return;
      }
      let params = {};
      params.datasourceId = this.props.datasourceId;
      params.filterDtoList = [];
      params.filterDtoList.push({
        columnName: this.props.relationColumnName,
        columnValue: this.value,
        filterType: 1,
        tableName: this.props.relationTableName
      });
      params.relationId = this.props.relationId;
      
      this.doUrl(`/admin/online/onlineOperation/listByOneToManyRelationId/${this.props.variableName}`, 'post', params).then(res => {
        this.selectedItems = Array.isArray(res.data.dataList) ? res.data.dataList : [];
      }).catch(e => {
        this.selectedItems = [];
        console.log(e);
      });
    }
  },
  computed: {
    selectValue () {
      let labelList = (this.selectedItems || []).map(item => item[this.props.displayField]);
      return labelList.length > 0 ? labelList.join(', ') : undefined;
    }
  },
  watch: {
    value: {
      handler () {
        this.getSelectItemList();
      },
      immediate: true
    }
  },
  mounted () {
  }
}
</script>

<style>
</style>
